// 生产模式 需要抽离css样式，需要清除打包构建dist目录的代码
// 抽离css标签的原因是因为 css文件是放在js当中的，js是通过给html添加head标签嵌入css样式 所以如果不分离css就会有闪屏的情况
// const { CleanWebpackPlugin } = require('clean-webpack-plugin');  
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const MiniCssPlugin = require('mini-css-extract-plugin')
const {merge} = require('webpack-merge');
const common  = require('./webpack.common');

const prodPlugin = {
    mode:'production',
    devtool: 'hidden-source-map',  // 生产模式的最佳实践
    module:{
        rules:[
            {
            use:[MiniCssPlugin.loader,'style-loader','postcss-loader','sass-loader'],
            test:/\.(css|sass)$/,
            },
        ]
    },

    plugins:[
        new MiniCssPlugin(),
        new ProgressBarPlugin()
    ],
    optimization: {
        // runtimeChunk: 'single', 添加一个运行时的chunk
        splitChunks: {
          cacheGroups: {
            vendor: {
            //   test: /[\\/]node_modules[\\/]/,
              name: '',
              chunks: 'all',
            },
          },
        },
      },
}

module.exports = merge(common,prodPlugin);